<template>
  <div class="photographer">
    <p>{{title}}</p>
    <ul class="big">
      <li v-for="(obj,ind) in userInfo" :key="ind">
        <dl>
          <dt>
            <img :src="obj.portrait" alt="">
          </dt>
          <dd>
            <p class="p1">{{obj.uname}}</p>
            <p class="p2">{{msg}}</p>
          </dd>
        </dl>
        <ul class=p_work>
          <li v-for="(img,ind) in obj.works" :key="ind">
            <img :src="img" alt="">
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapActions,mapGetters } from "vuex";
export default {
  data() {
    return {
      title: "热门摄影师",
      msg:"这个家伙很懒,什么都没有写",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    ...mapActions(["getData"]),
  },
};
</script>
<style scoped>
.photographer p {
  padding: 0.26rem 0.24rem;
  font-size: 0.28rem;
}
.photographer > p {
  display: inline-block;
  width: 100%;
  height: 0.94rem;
  text-align: left;
  font-size: 0.3rem;

  line-height: 0.42rem;
  border-bottom: 1px solid #ddd;
}
.photographer ul.big {
  width: 100%;
}
.photographer ul.big li {
  width: 100%;
}
.photographer ul.p_work{
  width: 100%;
  height: 2.5rem;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  background: #aaa;
}
.photographer ul.p_work li{
  height: 2.5rem;
  width: 2.5rem;
  background: #2c72ac;
}
.photographer ul.p_work li img{
   height: 2.5rem;
  width: 2.5rem;
}
.photographer dl{
  display: flex;
  width: 100%;
  padding: 15px 10px 12px;
}
.photographer dl dt{
  height: .7rem;
  width: .7rem;
  border-radius: .35rem;
  overflow: hidden;
}
.photographer dl dt img{
  width: .7rem;
  height: auto;
}
.photographer dl dd{
  font-size: .2rem;
  padding-left: .4rem;
}
.photographer dl dd .p1{
  display: block;
    padding: 0;
    padding-bottom: 2px;
    color: #2c72ac;
    font-size: .28rem;
    line-height: 15px;
    max-height: 30px;
}
.photographer dl dd .p2{
    padding: 0;
    color: #aaa;
    display: block;
    font-size: .22rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

